<template>
  <div class="rwView">
    <div class="top">
      <div class="number">重投次数：{{ props.cts }}</div>
      <div class="number">选择人：{{ props.xzr }}</div>
    </div>
    <div class="main">
        <div v-if="arrList[0]" class="card" :class="{'is_active':isActive-1 == 0}" @click="changeActive(0)">{{arrList[0].name}}</div>
        <div v-if="arrList[1]" class="card" :class="{'is_active':isActive-1 == 1}" @click="changeActive(1)">{{arrList[1].name}}</div>
    </div>
  </div>
</template>

<script setup>
import character from "@/assets/character.json";
import { reactive, ref } from "vue";

const props = defineProps({
  cts: {
    type: Number,
    default: 0,
  },
  xzr: {
    type: String,
    default: "",
  },
});

// 如果不需要对character进行响应式更新，可以直接使用导入的character
// 注意：导入的character是普通对象，不是响应式的。如果不需要响应式，可以不使用ref包装
const arrList = reactive([]);

const emit = defineEmits(['putList','clickActive']);

const isActive = ref(0);

const reinvestment = () => {
  // 清空数组
  arrList.length = 0;
  console.log(character[0]);
  
  if (character.length === 0) {
    return;
  }
 
  let index1 = Math.floor(Math.random() * character.length);
  let index2;
  do {
    index2 = Math.floor(Math.random() * character.length);
  } while (index1 === index2);
  
  
  arrList.push(character[index1]);
  arrList.push(character[index2]);
  console.log('arrList',arrList);
  emit('putList', [...arrList]); // 传递数组的副本
}

const changeActive = (index)=>{
    isActive.value = index + 1 ;
    emit('clickActive', arrList[index]);
}

defineExpose({
  reinvestment
});

</script>

<style lang="less" scoped>
.rwView {
  width: 100%;
  font-size: 28px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-content: center;
  .top{

  }
  .main{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    width: max-content;
    width: calc(480px + 20vw);
    height: calc(200px + 20vh);
    .card{
        width: calc(240px + 10vw);
        height: calc(100px + 10vh);
        border: 1px #333 solid;
        border-radius: 15px;
        line-height: calc(100px + 10vh);
        text-align: center;
        margin: 0 15px;
        cursor: pointer;
    }
    .is_active{
        background: rgb(255, 136, 136);
    }
  }
}
</style>
